<template>
	<view class="email-login-page special-bg">
		<u-navbar :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :bgColor="bgColor">
			<view slot="center" class="navtitle">邮箱登录</view>
		</u-navbar>
		<view class="logo">
			<u--image :showLoading="true" radius="100px" src="/static/logo.png" width="200rpx"
				height="200rpx"></u--image>
		</view>
		<view class="title font-text">欢迎来到ChatBaseX</view>
		<view class="info-box">
			<view class="info-item">
				<u--input class="input" placeholder="请输入邮箱" border="none" v-model="email" type="text"></u--input>
			</view>
			<view class="info-item">
				<u-input class="input" placeholder="请输入密码" border="none" v-model="password"
					:type="eye == true?'text':'password'">
					<view slot="suffix" @click="goeye()">
						<u-icon name="eye-fill" v-if="eye == true" color="#999" size="23"></u-icon>
						<u-icon name="eye-off" v-else color="#999" size="23"></u-icon>
					</view>
				</u-input>
			</view>
		</view>
		<view class="fun-box">
			忘记密码
		</view>
		<view class="policy-text">
			登录即标识您同意我们的<text @click="gorichtext('use')">《使用条款》</text>还有我们的 <text
				@click="gorichtext('policy')">《隐私与政策》</text>
		</view>
		<view class="login-btn" @click="gologin">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'rgba(0,0,0,0.0)',
				email: '',
				password: '',
				eye: false
			}
		},
		methods: {
			gologin() {
				if (this.email == '') {
					uni.showToast({
						title: '邮箱不能为空',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				}
				if (this.email.indexOf('@') !== -1) {
					console.log('字符串包含@符号');
					uni.showLoading({
						mask: true
					})
					let params = {
						account: this.email,
						password: this.password
					}
					this.$Request({
						method: 'POST',
						data: params,
						url: '/user/login'
					}).then(res => {
						console.log(res)
						uni.hideLoading()
						if (res.data.code == 1) {
							uni.setStorageSync('token', res.data.data.userinfo.token)
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				} else {
					console.log('字符串不包含@符号');
					uni.showToast({
						title: '请输入正确的邮箱',
						icon: 'none'
					})
					return
				}
			},
			gorichtext(e) {
				uni.navigateTo({
					url: '/pages/richtext/index?name=' + e
				})
			},
			goeye() {
				this.eye = !this.eye
			},
		}
	}
</script>

<style scoped lang="scss">
	.email-login-page {

		.login-btn {
			margin: 30rpx;
			line-height: 110rpx;
			height: 110rpx;
			background: linear-gradient(270deg, #87BAFF 0%, #6897FF 100%);
			border-radius: 58rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 900;
		}

		.fun-box {
			text-align: right;
			font-size: 28rpx;
			color: #fff;
			padding: 0 40rpx;

		}

		.policy-text {
			font-size: 24rpx;
			padding: 30rpx 40rpx;
			color: #FFFFFF;

			text {
				color: #2979FF;
			}
		}

		.info-box {
			padding: 0 30rpx;
			margin-top: 80rpx;

			.info-item {
				height: 110rpx;
				background: #F6FAFF;
				border-radius: 58rpx;
				margin-bottom: 30rpx;
				padding: 0 30rpx;

				.input {
					height: 110rpx;
				}
			}
		}

		.navtitle {
			color: #fff;
		}

		.logo {
			width: 200rpx;
			padding-top: 100rpx;
			margin: 0 auto;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 100%;
			}
		}

		.title {
			font-size: 40rpx;
			margin-top: 50rpx;
			text-align: center;
			color: #FFFFFF;
			font-weight: 900;
		}
	}
</style>